<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">
    <title>翻牌游戏</title>

    <style>
        .flip {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }



        .flip .card {
            border-radius: 12px;
            position: absolute;
            transition: all .5s;
            transform: rotateY(180deg);
            box-sizing: border-box;
            border: 2px solid #fff;
            background-position: center;
            background-size: contain;
            display: flex;
            margin: 8px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }

        .flip .epilog {
            margin-top: 20px;
            width: calc(min(100vw, 400px));
            font-size: 20px;
            color: #333;
            opacity: 0;
            transition: all .5s;
        }

        .card.r90 {
            transform: rotateY(90deg);
        }

        .card.r180 {
            transform: rotateY(0deg);
        }

        .card.err {
            border: 2px solid #fe6673;
        }

        .card.success {
            border: 2px solid #bdf3d4;
        }

        .card.fadeOut {
            opacity: 0;
        }

        .epilog.fadeIn {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="flip">

    </div>
    <script type="module">
        import { Maths } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/maths.js";
        import { Randoms } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/randoms.js";
        // 参数
        let params = {
            cards: [
                "./assets/movie-poster/m-byxz.jpg",
                "./assets/movie-poster/m-dbs.jpg",
                "./assets/movie-poster/m-dq.jpg",
            ],
            epilog: [
                '你肯定是出生在昼夜温差大的地方',
                '要不然怎么会这么甜~'
            ]
        }
        // 最大宽度
        let maxWidth = Math.min(document.body.clientWidth, 400)

        // 背景
        let cardBack = params.back || '#a1e8e4'
        // 翻牌容器
        let flipDom = document.querySelector('.flip');
        // 卡片元素`
        let cardDoms = [];
        // 获取因数
        let { a, b } = Maths.getFactorsByApproach(params.cards.length * 2)[0]
        let cardWidth = Math.floor(maxWidth / b);
        let cardHeight = Math.round(cardWidth * 1.5);
        // 塞入临时dom节点中
        for (let card of [...params.cards, ...params.cards]) {
            let cardDom = document.createElement('div');
            cardDom.className = "card"
            cardDom.style.background = cardBack;
            cardDom.style.width = cardWidth - 20 + 'px'
            cardDom.style.height = cardHeight - 20 + 'px'
            cardDom.addEventListener('click', (ev) => {
                openCard(cardDom, card)
            })
            cardDoms.push(cardDom)
        }
        // 打乱数组
        cardDoms = Randoms.getDisorganizeArray(cardDoms);
        // 构建页面
        for (let i = 0; i < cardDoms.length; i++) {
            const item = cardDoms[i];
            item.style.top = cardHeight * Math.floor(i / b) + 'px'
            item.style.left = (cardWidth - 8) * (i % b) + 'px'
            flipDom.appendChild(item)
        }
        // 第一张卡片
        let firstCardDom = null;
        let firstCard = "";
        // 第二张卡片
        let secondCardDom = null;
        let secondCard = "";
        // 打开卡片
        function openCard(dom, card) {
            if (firstCardDom != null && secondCardDom != null) return;
            // 点过了 不想让你点了
            if (dom == firstCardDom || dom == secondCardDom) return;

            dom.classList.add('r90')

            if (firstCardDom == null) {
                firstCardDom = dom;
                firstCard = card;
            }
            else {
                secondCardDom = dom;
                secondCard = card;
            }
            setTimeout(() => {
                dom.classList.remove('r90');
                dom.style.background = `no-repeat left/cover url(${card})`
                dom.classList.add('r180');

                if (firstCard == "" || secondCard == "") return;

                if (firstCard != secondCard) {
                    setTimeout(() => {
                        firstCardDom.classList.add('err')
                        secondCardDom.classList.add('err')
                        closeCard(firstCardDom);
                        closeCard(secondCardDom)
                    }, 500);
                }
                else {
                    setTimeout(() => {
                        firstCardDom.classList.add('success')
                        secondCardDom.classList.add('success')
                        closeCard(firstCardDom);
                        closeCard(secondCardDom)
                    }, 500);
                }
            }, 500);

        }
        // 关闭卡片
        function closeCard(dom) {
            setTimeout(() => {
                if (dom.classList.contains('err')) {
                    dom.classList.remove('err');
                    dom.classList.remove('r180');
                    dom.classList.add('r90');
                    setTimeout(() => {
                        dom.classList.remove('r90');
                        dom.style.background = cardBack;
                        if (firstCardDom == dom) {
                            firstCardDom = null;
                            firstCard = ''
                        }
                        if (secondCardDom == dom) {
                            secondCardDom = null;
                            secondCard = ''
                        }
                    }, 500);
                }
                if (dom.classList.contains('success')) {
                    dom.classList.remove('success');
                    dom.classList.remove('r180');
                    dom.classList.add('r90');
                    dom.classList.add('fadeOut');
                    setTimeout(() => {
                        if (firstCardDom == dom) {
                            firstCardDom = null;
                            firstCard = ''
                        }
                        if (secondCardDom == dom) {
                            secondCardDom = null;
                            secondCard = ''
                        }
                        dom.remove();
                        if (flipDom.children.length == 0) {
                            gameOver();
                        }
                    }, 500);
                }
            }, 500);
        }
        // 游戏结束
        function gameOver() {
            for (let i = 0; i < params.epilog.length; i++) {
                let tempEpilog = params.epilog[i];
                let epilogDom = document.createElement('div')
                epilogDom.textContent = tempEpilog;
                epilogDom.className = 'epilog'
                flipDom.append(epilogDom)
                setTimeout(() => {
                    epilogDom.classList.add("fadeIn")
                }, i * 500)
            }
        } 
    </script>
</body>

</html>